<template>
	<view class="body">
		<uni-section title="" subTitle=" title " type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar title="我的订单">
					<template v-slot:left>
						<image class="back-button" src="../../../static/ic_back.png" @click="goBack" />
					</template>
				</uni-nav-bar>
			</view>
		</uni-section>
		<view class="red-background">
			<view class="order-status">
				<text class="status-text">待支付</text>
				<text class="confirmation-text">您提交了订单，请等待系统确认</text>
				<text class="time-text">2024/5/14 14:54:44</text>
			</view>
			<img src="../../../static/ic_pay_bag.png" alt="Payment Bag" class="wallet-icon"
			     style="width: 40px; height: 35px; margin-right: 10px;"
			     @click="goBack">
			<view class="content1">
				<view class="address-info">
					<view class="contact-container">
						<uni-icons type="location" size="24" color="#666" class="location-icon"></uni-icons>

						<text class="contact-name">李先生</text>
						<text class="contact-phone">131****2168</text>
					</view>
					<text class="address-detail">江苏省南京市玄武区中国南京软件谷XX路18号XX云楼N13</text>
				</view>
			</view>
		</view>
		<view class="product-content">
			<!-- 手机图案 -->
			<view class="products">
				<view class="product-image-container">
					<img class="product-image" src="../../../static/product001.png" alt="产品图片" />
				</view>
				<!-- 手机信息 -->
				<view class="product-info">
					<text class="product-name">[XXXX40 Pro】XXXX40 Pro 5G手机</text>
					<text class="product-price">￥6399</text>
					<view class="pricebox">
						<text class="product-guige">珠光白，8+256G </text>
						<text class="product-number">x1</text>
					</view>
					<view class="product-delivery-info">
						<view class="product-delivery">
							<text>配送</text>
						</view>
						<view class="product-biaozhun">
							<text>标准配送</text>
						</view>
					</view>
					<view class="divider1"></view>
					<view class="product-fapiao-container">
						<text class="product-fapiao">发票</text>
						<text class="product-personal">普通电子发票</text>
					</view>
				</view>
			</view>
		</view>

		<view class="content3">
			<view class="money">
				商品金额
			</view>
			<view class="yunfei">
				运费
			</view>
			<view class="shifukuan">
				实付款
			</view>
			<view class="jiner1">
				￥6399
			</view>
			<view class="jiner2">
				￥0.00
			</view>
			<view class="jiner3">
				￥6399
			</view>
		</view>


	</view>
	<view class="divider2"></view>
	<button class="bottom-right-button" @click="simulatePayment">去支付</button>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 定义返回上一页的方法
const goBack = () => {
  uni.navigateBack();
};

// 模拟支付过程的方法
const simulatePayment = () => {
  // 使用 setTimeout 来模拟异步操作
  setTimeout(() => {
    // 模拟支付成功或失败的结果
    const paymentResult = Math.random() > 0.1; // 随机决定支付结果

    if (paymentResult) {
      // 支付成功
      wx.showToast({
        title: '支付成功',
        icon: 'success',
        duration: 1000
      });
      // 可以添加代码处理支付成功后的逻辑，比如跳转到订单详情页面
    } else {
      // 支付失败
      wx.showToast({
        title: '支付失败，请重试',
        icon: 'none',
        duration: 1000
      });
    }
  }, 1000); // 模拟网络延迟
};

// 假设我们使用了一些生命周期钩子
onMounted(() => {
  console.log('组件已挂载');
});

onUnmounted(() => {
  console.log('组件将被卸载');
});
</script>

<style lang="scss">
	page {
		background-color: #f2f4f5;
	}



	.back-button {
		width: 48rpx;
		/* 根据实际需要调整图片宽度 */
		height: 45rpx;
		/* 根据实际需要调整图片高度 */
		cursor: pointer;
		/* 鼠标悬停在图片上时显示手形图标 */
	}


	/* 定义红色背景的样式 */
	.red-background {
		background-color: #ff1643;
		/* 设置背景颜色为红色 */
		padding: 110rpx;
		/* 内边距 */
		color: white;
		/* 文字颜色，确保在红色背景上可读 */
		border-radius: 5rpx;
		/* 边框圆角 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		/* 轻微的阴影效果 */
		display: flex;
		/* 使用flex布局以居中内容 */
		/* justify-content: flex-end; */
		justify-content: space-between;
		/* 左右分布文本和图标 */
		align-items: center;
		/* 垂直居中 */
		position: relative;

		/* 文本样式 */
		.order-status {
			display: flex;
			flex-direction: column;
			/* 垂直排列子元素 */
			align-items: flex-start;
			/* 子元素靠左侧对齐 */
			margin-left: -15%;
			margin-top: -15%;

		}

		.confirmation-text {
			margin-top: 5rpx;
			/* 与上一行文本保持一定间距 */
			color: #fe8e97;

		}

		.time-text {
			margin-top: 3rpx;
			/* 与上一行文本保持一定间距 */
			color: #fe8e97;
		}

		.icon-container {
			display: flex;
			align-items: center;
			/* 确保图标在同一行垂直居中 */
			margin-top: -30rpx;
			margin-right: -20%;

		}
	}







	.content1 {
		width: 90%;
		/* 或其他宽度，根据实际需求 */
		padding: 18rpx;
		/* 内边距 */
		background-color: white;
		/* 白色背景 */
		border-radius: 15rpx;
		/* 边框圆角 */
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
		/* 轻微的阴影效果 */
		position: absolute;
		/* 绝对定位 */
		top: 110%;
		/* 从顶部开始，根据实际调整 */
		left: 50%;
		/* 从左边开始，根据实际调整 */
		transform: translate(-50%, -50%);
		/* 向左和向上移动50%，自我居中 */
		z-index: 10;

		.address-info {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-left: 10%;
			margin-bottom: 8rpx;
		}

		.contact-container {
			display: flex;
		}

		.contact-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 5rpx;
			margin-right: -5%;
		}

		.contact-phone {
			font-size: 25rpx;
			color: #666;
			margin-left: 5%;
			margin-bottom: 5rpx;
		}

		.address-detail {
			font-size: 20rpx;
			color: #666;

		}


	}





	/* 定位图标 */
	.location-icon {
		position: absolute;
		/* 使用绝对定位 */
		left: 20rpx;
		/* 距离左侧的距离，根据实际情况调整 */
		top: 50%;
		/* 从顶部开始 */
		transform: translateY(-50%);
		/* 垂直居中 */
		margin-right: 0;

	}

	.product-content {
		flex-direction: column;
		align-items: center;
		padding: 11rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
		width: 90%;
		height: 380rpx;
		max-width: 1000rpx;
		/* 限制最大宽度 */
		margin: auto;
		/* 水平居中 */
		margin-top: 120rpx;
		position: relative;
		.products{
			margin-top: 23rpx;
		}
		.pricebox {
			display: flex;
			justify-content: space-between;
		}

		.product-image-container {
			width: 30%;
			padding: 0rpx 0;
		}

		.product-image {
			width: 100%;
			height: auto;
			border-radius: 5rpx;
		}

		.product-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			margin-top: 85rpx;
			/* 与图片的间距 */
			/* 其他样式保持不变 */
		}

		.product-name {
			font-size: 20rpx;
			color: #333;
			margin-bottom: 0rpx;
			margin-top: -270rpx;
			margin-right: -100rpx;
		}

		.product-price {
			font-size: 25rpx;
			color: #333;
			margin-bottom: 8rpx;
			margin-right: -80%;
		}

		.product-number {
			font-size: 13rpx;
			color: #333;
			margin-bottom: 10rpx;
			margin-right: -90%;

		}

		.product-guige {
			font-size: 10rpx;
			color: #666;
			margin-bottom: 80rpx;
			/*调整配送和图片的间隔*/
			margin-right: 10%;
		}

		.product-delivery-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 0rpx;
			/* 根据分割线的高度调整 */
		}

		.product-delivery,
		.product-biaozhun {
			font-size: 14rpx;
			color: #999;
		}

		.product-delivery {
			margin-right: 470rpx;
			/* 根据需要调整间距 */
		}

		.product-biaozhun {
			margin-left: 10rpx;
			/* 根据需要调整间距 */
		}

		.product-fapiao-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			/* 根据实际情况调整margin-bottom，以确保与分割线的间距 */
			margin-bottom: 40rpx;
		}

		.product-fapiao {
			font-size: 20rpx;
			color: #999;
			margin-left: auto;
			/* 自动外边距会填充剩余空间 */
			margin-right: 435rpx;
			/* 右侧外边距来分隔文本 */
		}

		.product-personal {
			font-size: 20rpx;
			color: #999;
			/* 重置margin，避免影响布局 */
			margin: 0;
			/* 如果需要，可以设置margin-left来调整与左侧的距离 */
		}

		.divider1 {
			width: 100%;
			/* 分割线宽度 */
			height: 2rpx;
			/* 分割线高度 */
			background-color: #e0e0e0;
			/* 分割线颜色 */
			margin: 10rpx 0;
			/* 上下边距 */
		}

	}




	.content3 {
		width: 86%;
		/* 或其他宽度，根据实际需求 */
		height: 10%;
		padding: 25rpx;
		/* 内边距 */
		background-color: white;
		/* 白色背景 */
		border-radius: 15rpx;
		/* 边框圆角 */
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		/* 轻微的阴影效果 */
		position: absolute;
		/* 绝对定位 */
		top: 75%;
		/* 调整上下位置 */
		left: 50%;
		/* 从左边开始，根据实际调整 */
		transform: translate(-50%, -50%);
		/* 向左和向上移动50%，自我居中 */
		z-index: 10;

		.yunfei,
		.money,
		.shifukuan {
			position: relative;
			margin: 5rpx 0;
			font-size: 28rpx;
			color: #333;
		}

		.jiner1,
		.jiner2,
		.jiner3 {
			position: relative;
			margin: 8rpx 0;
			font-size: 15rpx;
			color: #333;
			top: -120rpx;
			left: 530rpx;
		}



	}


	.divider2 {
		position: relative;
		width: 100%;
		/* 分割线宽度 */
		height: 2rpx;
		/* 分割线高度 */
		background-color: #e0e0e0;
		/* 分割线颜色 */
		margin: 260rpx 0;
		top: 80rpx;
	}



	.bottom-right-button {
		position: fixed;
		/* 使用绝对定位 */
		bottom: 30rpx;
		/* 距离底部20像素 */
		right: 20rpx;
		/* 距离右侧20像素 */
		padding: 0rpx 100rpx;
		/* 内边距 */
		background-color: #fe014b;
		/* 按钮背景颜色 */
		color: white;
		/* 文字颜色 */
		border: none;
		/* 无边框 */
		border-radius: 50rpx;
		/* 边框圆角 */
		cursor: pointer;
		/* 鼠标悬停时显示手形图标 */
		font-size: 30rpx;
		/* 字体大小 */
		z-index: 1000;
		/* 确保按钮在页面其他元素之上 */
		height: 55rpx;
		align-items: center;
		/* 垂直居中文本 */
		justify-content: center;
		/* 水平居中文本 */
		line-height: 50rpx;
		/* 根据按钮的高度调整line-height，确保文本垂直居中 */
	}
</style>
